<template>
	<view class="list" id="postForm">
		<block v-for="(item, index) in form" :key="index">
			<view class="line" v-if="item.type == 'input'">
				<view v-if="item.name" class="label">{{item.name}}</view>
				<view class="item"><input :placeholder="item.placeholder" v-model="item.value"/></view>
			</view>
			<view class="line" v-if="item.type == 'textarea'">
				<view v-if="item.name" class="label">{{item.name}}</view>
				<view class="item"><textarea :placeholder="item.placeholder" :rows="item.rows" v-model="item.value"/></view>
			</view>
			<view class="line" v-if="item.type == 'radio'">
				<view v-if="item.name" class="label">{{item.name}}</view>
				<view class="item">
					<radio-group @change="radioChange(index,$event)">
						<label v-for="(ditem, dindex) in item.datas" :key="dindex">
							<radio :value="ditem.id" :checked="item.value === ditem.id"/>{{ditem.name}}
						</label>
					</radio-group>
				</view>
			</view>
			<view class="line" v-if="item.type == 'checkbox'">
				<view v-if="item.name" class="label">{{item.name}}</view>
				<view class="item">
					<checkbox-group @change="checkboxChange(index,$event)">
						<label v-for="(ditem, dindex) in item.datas" :key="dindex">
							<checkbox :value="ditem.id" :checked="item.value === ditem.id"/>{{ditem.name}}
						</label>
					</checkbox-group>
				</view>
			</view>
			<view class="line" v-if="item.type == 'datetime'">
				<view v-if="item.name" class="label">{{item.name}}</view>
				<view class="item" :style="item.format=='datetime' && 'display:flex;'">
					<picker @change="dateChange(index,$event)" mode="date" :value="item.date" :style="item.format=='datetime' && 'width: 50%;'">
						<view>{{item.date}}</view>
					</picker>
					<picker v-if="item.format=='datetime'" @change="timeChange(index,$event)" mode="time" :value="item.time" style="width: 50%;">
						<view>{{item.time}}</view>
					</picker>
				</view>
			</view>
			<view class="line" v-if="item.type == 'select'">
				<view v-if="item.name" class="label">{{item.name}}</view>
				<view class="item">
					<picker @change="selectChange(index,$event)" mode="selector" :range="item.datas" range-key="name" :value="$getArrayIndex(item.datas,item.value,'id')">
						<view>{{$getArrayName(item.datas,item.value)||item.placeholder}}</view>
					</picker>
				</view>
			</view>
			<view class="line" v-if="item.type == 'tree'">
				<view v-if="item.name" class="label">{{item.name}}</view>
				<view class="item">
					<CustomPickerMultiple v-if="item.multiple" v-model="item.value" :height="customPickerHeight" :json="item.json" :placeholder="item.placeholder"></CustomPickerMultiple>
					<CustomPicker v-else v-model="item.value" :json="item.json" :placeholder="item.placeholder"></CustomPicker>
				</view>
			</view>
			<view class="line" v-if="item.type == 'uploads'">
				<view v-if="item.name" class="label">{{item.name}}</view>
				<view class="item">
					<uploadImg :placeholder="item.placeholder" @returnImgUrl="item.value = $event" :initImgList="item.value"></uploadImg>
				</view>
			</view>
			<view class="line" v-if="item.type == 'model'">
				<view v-if="item.name" class="label">{{item.name}}</view>
				<view class="item">
					<Category :url="item.url" :placeholder="item.placeholder" v-model="item.value"></Category>
				</view>
			</view>
		</block>
		<Sku v-if="showSku" :spec="datas.spec" :spec_data="datas.spec_data" @close="showSku=false" @confirm="skuConfirm"></Sku>
		<view class="line" v-if="button">
			<button type="primary" @click="onConfirm" :disabled="isDisabled">提交</button>
			<button type="default" @click="onClose">取消</button>
		</view>
	</view>
</template>
 
<script>
	import Sku from '@/components/sku'
	import uploadImg from "@/components/uploadImg"
	import Category from "@/components/category"
	import CustomPicker from "@/components/customPicker"
	import CustomPickerMultiple from "@/components/customPickerMultiple"
	export default {
		components: {
			Sku,
			uploadImg,
			Category,
			CustomPicker,
			CustomPickerMultiple
		},
		props: {
			form_id : Number,
			button : {
				type : Boolean,
				default : false
			},
			datas : {
				type : Object,
				default : null
			},
			url: String
		},
		watch:{
			datas: {
				handler(newValue, oldValue) {
					if(newValue && newValue.form){
						this.form = this.$putCustomFormData(this.form,newValue.form)
					}
				},
				deep: true
			},
			form_id(){
				this.loadData()
			}
		},
		data() {
			return {
				showSku : false,
				spec_index : -1,
				form : [],
				isDisabled : false,
				customPickerHeight : 0
			}
		},
		mounted() {
			if(this.form_id > 0){
				this.loadData()
			}
		},
		methods: {
			loadData() {
				this.form = this.$getConfig('forms',this.form_id,'data')
				this.form.forEach(v =>{
					if(v.type == 'datetime'){
						v.date = '2019-12-12'
						v.time = '00:00'
					}
				})
				let that = this
				setTimeout(() => {
					uni.createSelectorQuery().in(this).select("#postForm").boundingClientRect(rect => {
						uni.getSystemInfo({
							success: function(res) {
								if(rect.bottom < res.windowHeight){
									that.customPickerHeight = res.windowHeight - rect.bottom
								}
							}
						})
					}).exec()
				},50)
			},
			radioChange(index,e){
				this.form[index].value = Number(e.detail.value)
			},
			checkboxChange(index,e){
				this.form[index].value = Number(e.detail.value)
			},
			selectChange(index,e){
				this.form[index].value = this.form[index].datas[Number(e.detail.value)].id
			},
			dateChange(index,e){
				this.form[index].date = Number(e.detail.value)
				this.$set(this.form,index,this.form[index])
			},
			timeChange(index,e){
				this.form[index].time = Number(e.detail.value)
				this.$set(this.form,index,this.form[index])
			},
			skuConfirm(spec_index){
				this.spec_index = spec_index
				this.showSku = false
				this.onConfirm()
			},
			async onConfirm(){
				let title
				this.form.forEach(v =>{
					if(v.require && (!v.value || v.value.length == 0)){
						title = v.name+' 不能为空!'
						return
					}
				})
				if(title){
					uni.showToast({
						title: title,
						icon: 'none',
						duration: 2000
					})
				}else{
					if(this.url == 'order'){
						if(this.datas){
							let order_product = [{product_id:this.datas.id,form:this.form}]
							if(this.datas.spec_data && this.datas.spec_data.length > 1){
								if(this.spec_index > -1){
									order_product[0].spec_index = this.spec_index
								}else{
									this.showSku = true
									return
								}
							}
							await this.$api('POST','order',{order_product:order_product})
							this.spec_index = -1
						}
					}else if(this.url == 'address'){
						let form = this.$getCustomFormData(this.form)
						if(this.datas){
							await this.$api('PUT','address/'+this.datas.id,{form:form})
						}else{
							await this.$api('POST','address',{form:form})
						}
					}else if(this.url == 'user'){
						let form = this.$getCustomFormData(this.form)
						await this.$api('PUT','user/'+this.datas.id,{form:form})
					}else if(this.url == 'formOrder'){
						if(this.datas){
							await this.$api('PUT','formOrder/'+this.datas.id,{form_id:this.form_id,form:this.form})
						}else{
							await this.$api('POST','formOrder',{form_id:this.form_id,form:this.form})
						}
					}else{
						this.$emit('onFormSubmit',this.form)
					}
					this.isDisabled = true
					setTimeout(()=>{
						this.isDisabled = false
					}, 2000)
				}
			},
			onClose(){
				if(this.url){
					uni.navigateBack()
				}else{
					this.$emit('close')
				}
			}
		}
	}
</script>

<style lang='scss'>
.list{
	padding: 10upx;
	overflow: hidden;
	overflow-y:scroll;
	.line{
		background-color:#fff;
		display: flex;
		padding: 10upx;
		justify-content:space-between;
		line-height: 50upx;
	}
	.label{
		width: 130upx;
		color: #666666;
		font-size: 24upx;
	}
	.item{
		width: 100%;
		padding: 0 10upx;
		font-size: 24upx;
		input,textarea,picker{
			min-height: 50upx;
			width: 100%;
			border:1upx solid #eee;
			border-radius: 10upx;
		}
		input {
			width: calc(100% - 15upx) !important;
			padding-left:15upx;
		}
		radio-group{
			display: flex;
			flex-wrap: wrap;
			label{
				white-space:nowrap;
				padding:1upx 10upx 1upx 0;
			}
		}
		checkbox-group{
			display: flex;
			flex-wrap: wrap;
			label{
				white-space:nowrap;
				padding:1upx 10upx 1upx 0;
			}
		}
		picker{
			text-align: center;
		}
	}
}
</style>
